import { IEditor, EditContext, ReferencePosition } from '@visactor/vtable-editors';
import ReactDOM from "react-dom/client";
import type { DatePickerProps } from 'antd';
import { DatePicker, Space } from 'antd';
import dayjs from 'dayjs';

export class VTableTimestampEditor<V = any> implements IEditor<V>{

    container: HTMLElement;

    element: HTMLElement;

    value: V;

    successCallback: () => void;

    constructor(editorConfig) {
    }

    onStart(context: EditContext<V>) {
        console.log('onStart');
        const { container, referencePosition, value, endEdit } = context;

        this.value = value;
        this.successCallback = endEdit;
        this.container = container;
        this.element = document.createElement('div');
        container.appendChild(this.element);

        const that = this;
        ReactDOM.createRoot(this.element).render(
            <DatePicker
                format={{
                    format: 'YYYY-MM-DD HH:mm:ss',
                    type: 'mask',
                }}
                defaultValue={dayjs(value && value != '' ? value + '' : '2022-01-01 00:00:00', "YYYY-MM-DD HH:mm:ss")}
                showTime={true}
                onChange={(date, dateString) => {
                    console.log(date, dateString);
                    that.value = dateString as V;
                }}
                onOk={(date) => {
                    let dateString = date.format('YYYY-MM-DD HH:mm:ss');
                    that.value = dateString as V;
                }}
                onOpenChange={(open) => {
                    if (!open) {
                        console.log('close.....');
                        this.successCallback();
                    }
                }}
            />
        );

        this.element.style.padding = '4px';
        this.element.style.width = '100%';
        this.element.style.boxSizing = 'border-box';
        this.element.style.position = 'absolute';

        this.adjustPosition(referencePosition.rect);
    }
    onEnd() {
        if (this.element) {
            this.container.removeChild(this.element);
            this.element = null;
        }
    }

    adjustPosition(rect) {
        this.element.style.top = rect.top + 'px';
        this.element.style.left = rect.left + 'px';
        this.element.style.width = rect.width + 'px';
        this.element.style.height = rect.height + 'px';
    }

    isEditorElement(target: HTMLElement): boolean {
        console.log('isEditorElement');
        if (target === this.element) {
            return true;
        }
        return false;
    }

    validateValue(): boolean {
        console.log('validateValue');
        return true;
    }
    getValue(): V {
        return this.value;
    }

    beginEditing(container: HTMLElement, referencePosition: ReferencePosition, value: V): void {
        console.log('beginEditing');
    }

    exit() {
        console.log('exit');
    }

    targetIsOnEditor(target: HTMLElement): boolean {
        console.log('targetIsOnEditor');
        return true;
    }
    bindSuccessCallback(callback: () => void) {
        console.log('bindSuccessCallback');
    };

}